<template>
  <div class="module-layout">
    <je-panel v-bind="options">
      <template #top>
        <source-head @selectTableSource="selectTableSource" />
      </template>
      <template #default>
        <je-editor-code
          v-model:value="editorValue"
          v-model:language="language"
          height="100%"
          width="100%"
          @save="onSave"
          @init="onInit"
          @change="onChange"
        />
      </template>
    </je-panel>
  </div>
</template>

<script>
  import { defineComponent, reactive, ref, toRefs, onMounted, inject, toRaw, watch } from 'vue';
  import SourceHead from '@/views/data-source/common/source-head.vue';
  import { EditorCode, Modal } from '@jecloud/ui';
  import { useSourceStore } from '@/store/source-store';
  import VueEvent from '@/helper/event';
  import { SOURCE_START_RECOVER } from '@/helper/constant';
  import { getSqlDdlByTableId } from '@/api/index';
  export default defineComponent({
    name: 'SourceSql',
    components: {
      SourceHead,
      JeEditorCode: EditorCode,
    },
    setup() {
      const sourceStore = useSourceStore(); //数据源全局状态
      const curSourceCode = sourceStore.getSourceCode();
      const curSourceData = sourceStore.getSourceDataByCode(curSourceCode);
      const state = reactive({
        curTabSourceCode: curSourceCode,
        options: {
          top: { size: 40, split: false },
        },
        language: 'sql', //编辑器语言
        //sql
        editorValue: curSourceData.DATASOURCE_DATA ? curSourceData.DATASOURCE_DATA : '',
      });
      const methods = {
        onInit($editor) {
          // console.log('初始化：', $editor, editor.value.getEditor());
        },
        onSave(value) {
          //保存 Ctrl + S
          // console.log('保存成功：', value);
        },
        onChange(value, evt) {
          //数据变动
          // console.log('数据变动：', value, evt);
        },
        //sql数据源选择资源表
        selectTableSource(tableSource) {
          getSqlDdlByTableId({ JE_CORE_RESOURCETABLE_ID: tableSource.id }).then((res) => {
            if (res.success) {
              state.editorValue = res.data;
              const curSourceCode = sourceStore.getSourceCode();
              const curSourceData = sourceStore.getSourceDataByCode(curSourceCode);
              curSourceData.masterTableId = tableSource.id;
            } else {
              Modal.alert(res.message, 'error');
            }
          });
        },
        setSourceSql(sqlConfig) {
          const curSourceCode = sourceStore.getSourceCode();
          const curSourceData = sourceStore.getSourceDataByCode(curSourceCode);
          curSourceData.DATASOURCE_DATA = sqlConfig;
        },
        //复原操作
        startRecoverData(sourceCode) {
          if (state.curTabSourceCode == sourceCode) {
            const curSourceData = sourceStore.getSourceDataByCode(sourceCode);
            state.editorValue = curSourceData.DATASOURCE_DATA;
          }
        },
      };
      watch(
        () => state.editorValue,
        (val) => {
          methods.setSourceSql(val);
        },
      );
      onMounted(() => {
        VueEvent.on(SOURCE_START_RECOVER, methods.startRecoverData);
      });
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .module-layout {
    width: 100%;
    height: 100%;
  }
</style>
